<!-- 周边商城列表组件 -->

<template>
	<div class="slide-module">
		<h3>{{title}}</h3>
		<ul>
			<li v-for="item in moves" :key="item.id">
                <router-link to="/gallery" >
				<i>
					<img :src="item.imgSrc" alt="">
					<span v-show="item.type == 1 ">视频</span>
				</i>
				<p class="title" v-text="item.title"></p>
				<p class="type"><span v-text="item.cont"></span><span v-text="item.num"></span></p>
                </router-link>

			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			moves: {
				type: Array,
			},
			title: {
				type: String,
			}
		},

		data() {
			return {

			};
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	// 左右滑动模块
	// 视频

	h3 {
		position: relative;
		text-indent: 8px;

		&:after {
			position: absolute;
			content: '';
			width: 4px;
			height: 15px;
			border-radius: 2px;
			background: @base-blue-color;
			left: 0;
			right: 0;
			top: 1px;
			margin-left: 0;
			margin-right: auto;
		}

		&:before {
			content: '';
			position: absolute;
			font-weight: bold;
			right: 0px;
			top: 0px;
			color: #e5e5e5;
			height: 20px;
			width: 20px;
			background-size: 100% 100%;
			background-image: url('../assets/imgs/right-jt.svg');

		}
	}

	.slide-module {
		text-align: left;
		background: #fff;
		padding: 30px 0 0px 0px;

		h3 {
			font-size: 17px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 25px 0px;
			margin-top: 20px;
			position: relative;
		}

		//显示左右滚动的css样式
		ul {
			display: inline-block;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;

			li {
				margin-right: 20px;
				display: inline-block;
				width: 138px;

				i {
					display: inline-block;
					width: 138px;
					height: 92px;
					border-radius: 5px;
					position: relative;

					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}

					span {
						position: absolute;
						width: 40px;
						height: 20px;
						bottom: 5px;
						right: 5px;
						text-align: center;
						line-height: 20px;
						color: #fff;
						background: @base-blue-color;
						border-radius: 10px;
					}
				}

				p.title {
					font-size: 15px;
					font-weight: bold;
					color: @base-black-color;
					padding: 10px 0;
				}

				p.type {
					margin-top: 6px;
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: #CCCCCC;

					span {
						text-align: right;
						padding-right: 22px;
						display: inline-block;

						&:last-child {
							position: relative;

							&:after {
								position: absolute;
								content: '';
								width: 14px;
								height: 10px;
								// background: url('../../assets/imgs/home_browse@2x.png');
								background-size: 100% 100%;
								vertical-align: middle;
								left: 0;
								right: -20px;
								display: inline-block;
								top: 0;
								bottom: 0;
								margin: auto;
							}
						}

					}
				}

				span {
					font-size: 12px;
					font-weight: 500;
					color: @base-color-gray;
				}
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
</style>
